import Tabs, { TabsProps } from '@/components/Tabs';
import React, { useRef, useState } from 'react';
import { useAccess, useIntl } from 'umi';
import BatteryBox from './components/BatteryBox';
import Chargingpiles from './components/Chargingpiles';
import Inverter from './components/Inverter';
import Meter from './components/Meter';
import Pcs from './components/Pcs';
import ToolBarRender from './components/ToolBar';
import Transformer from './components/Transformer';
import Styles from './index.less';

const Index: React.FC = () => {
  const pcsTableRef = useRef(null);
  const batteryBoxTableRef = useRef(null);
  const otherBoxTableRef = useRef(null);
  const inverterBoxTableRef = useRef(null);
  const chargeBoxTableRef = useRef(null);
  const access = useAccess();
  const items: TabsProps['items'] = [];
  const inclueArray = ['4', '5', '6', '7', '8'];
  const intl = useIntl();

  if (access.can('sys:device:pcs')) {
    items.push({
      key: '1',
      label: intl.formatMessage({ id: 'systemManagement.deviceManagementMenu.pcs' }),
      children: (
        <Pcs
          ref={pcsTableRef}
          deveiceType={3}
          titleName={intl.formatMessage({ id: 'systemManagement.deviceManagementMenu.pcs' })}
        />
      ),
    });
  }

  if (access.can('sys:device:cabinet')) {
    items.push({
      key: '2',
      label: intl.formatMessage({ id: 'systemManagement.deviceManagementMenu.Batterycabinet' }),
      children: (
        <BatteryBox
          ref={batteryBoxTableRef}
          deveiceType={1}
          titleName={intl.formatMessage({
            id: 'systemManagement.deviceManagementMenu.Batterycabinet',
          })}
        />
      ),
    });
  }

  if (access.can('sys:device:batteryBox')) {
    items.push({
      key: '3',
      label: intl.formatMessage({ id: 'systemManagement.deviceManagementMenu.Batteryboxs' }),
      children: (
        <BatteryBox
          ref={batteryBoxTableRef}
          deveiceType={2}
          titleName={intl.formatMessage({
            id: 'systemManagement.deviceManagementMenu.Batteryboxs',
          })}
        />
      ),
    });
  }

  if (access.can('sys:device:meter')) {
    items.push({
      key: '4',
      label: intl.formatMessage({ id: 'systemManagement.deviceManagementMenu.Meter' }),
      children: (
        <Meter
          ref={otherBoxTableRef}
          deveiceType={4}
          titleName={intl.formatMessage({ id: 'systemManagement.deviceManagementMenu.Meter' })}
        />
      ),
    });
  }

  if (access.can('sys:device:transformer')) {
    items.push({
      key: '5',
      label: intl.formatMessage({ id: 'systemManagement.supplementary.transformer' }),
      children: (
        <Transformer
          ref={otherBoxTableRef}
          deveiceType={5}
          titleName={intl.formatMessage({ id: 'systemManagement.supplementary.transformer' })}
        />
      ),
    });
  }

  if (access.can('sys:device:allCabinetController')) {
    items.push({
      key: '6',
      label: intl.formatMessage({ id: 'systemManagement.supplementary.integratedController' }),
      children: (
        <Meter
          ref={otherBoxTableRef}
          deveiceType={6}
          titleName={intl.formatMessage({
            id: 'systemManagement.supplementary.integratedController',
          })}
        />
      ),
    });
  }

  if (access.can('sys:device:cabinetController')) {
    items.push({
      key: '7',
      label: intl.formatMessage({
        id: 'systemManagement.supplementary.integratedCabinetController',
      }),
      children: (
        <Meter
          ref={otherBoxTableRef}
          deveiceType={7}
          titleName={intl.formatMessage({
            id: 'systemManagement.supplementary.integratedCabinetController',
          })}
        />
      ),
    });
  }

  if (access.can('sys:device:pcsController')) {
    items.push({
      key: '8',
      label: intl.formatMessage({ id: 'systemManagement.supplementary.PCSController' }),
      children: (
        <Meter
          ref={otherBoxTableRef}
          deveiceType={8}
          titleName={intl.formatMessage({ id: 'systemManagement.supplementary.PCSController' })}
        />
      ),
    });
  }

  if (access.can('sys:device:inverter')) {
    items.push({
      key: '9',
      label: intl.formatMessage({ id: 'systemManagement.supplementary.inverter' }),
      children: (
        <Inverter
          ref={inverterBoxTableRef}
          deveiceType={9}
          titleName={intl.formatMessage({ id: 'systemManagement.supplementary.inverter' })}
        />
      ),
    });
  }

  if (access.can('sys:device:chargingStation')) {
    items.push({
      key: '10',
      label: intl.formatMessage({ id: 'systemManagement.supplementary.chargingStation' }),
      children: (
        <Chargingpiles
          ref={chargeBoxTableRef}
          deveiceType={10}
          titleName={intl.formatMessage({ id: 'systemManagement.supplementary.chargingStation' })}
        />
      ),
    });
  }

  items.push({
    key: '11',
    label: '',
    children: null,
  });

  const [activeKey, setActiveKey] = useState(items[0]?.key);
  const onChange = (key: string) => {
    setActiveKey(key);
  };

  return (
    <div>
      <Tabs
        className={Styles.tabs}
        activeKey={activeKey}
        tabPosition="top"
        items={items}
        onChange={onChange}
        destroyInactiveTabPane={true}
        tabBarExtraContent={
          (activeKey === '1' && <ToolBarRender tableRef={pcsTableRef} />) ||
          ((activeKey === '2' || activeKey === '3') && (
            <ToolBarRender tableRef={batteryBoxTableRef} />
          )) ||
          (inclueArray.includes(activeKey) && <ToolBarRender tableRef={otherBoxTableRef} />) ||
          (activeKey === '9' && <ToolBarRender tableRef={inverterBoxTableRef} />) ||
          (activeKey === '10' && <ToolBarRender tableRef={chargeBoxTableRef} />)
        }
      ></Tabs>
    </div>
  );
};
export default Index;
